import Render from './index.rjs';
//js 文件是组件层，负责组件状态管理和业务逻辑

// eslint-disable-next-line no-undef
Component({
  // 组件属性定义
  properties: {
    canvasId: String, // Canvas元素的ID
    hideThumb: {
      type: Boolean,
      value: false, // 是否隐藏滑块
    },
    containerStyle: {
      type: String,
      value: 'position: relative;', // 容器默认样式
    },
    colorType: { //9个颜色
      type: Number,
      value: 0,//默认是颜色类型1
    },
    radius: {
      type: Number,
      value: 100, // 圆环外半径
    },
    innerRingRadius: {
      type: Number,
      value: 50, // 圆环内半径
    },
    value: {
      type: Number,
      value: 0, // 当前值（0-100范围）
    },
    onTouchStart: Function, // 触摸开始回调
    onTouchMove: Function, // 触摸移动回调
    onTouchEnd: Function, // 触摸结束回调
  },

  //在小程序组件中，this.data 包含两部分数据：
  //properties属性值：组件外部传入或默认的属性值
  //data内部数据：组件内部定义的数据
  // 组件内部数据
  data: {
    render: null, // 渲染器实例
    isTouch: false, // 是否正在触摸
    touchType: '', // 触摸类型
    colorText: '', // 颜色文本
  },
  // 数据监听器
  observers: {
    // 监听value值变化，.**：深层内部属性值变化时都执行，假如value是个对象的时候，内部属性值变化，这里就会监听到
    'value.**'(v) {
      console.log('value-属性值变化-MyCircle', v);
      // 如果正在移动中，则不处理
      if (this.touchType === 'move') {
        return;
      }
      // 当值变化超过一定范围或都为0时，更新位置
      if ((this.lastValue != v) && this.lastValue != undefined) {
        console.log('value-属性值变化-不相同，重新绘制', this.lastValue, v);
        // this._updatePosByRgb(v);
        this.render?.renderAnnulusColorThumb(v);
        this.lastValue = v;
      } else {
        console.log('value-属性值变化-因相同跳过');
      }
    },

    'hideThumb'(flag) {
      console.log('MyCircle-属性值变化-hideThumb', flag);
      // 如果正在移动中，则不处理
      this.render?.setHideThumb(flag);
    }


  },
  // 组件生命周期
  lifetimes: {
    // 组件实例进入页面节点树时执行
    attached() {
      console.log('MyCircle-attached');

      // 初始化渲染器
      this.render = new Render(this);
      const { radius, innerRingRadius, colorType, canvasId, value, hideThumb } = this.data;
      // 设置圆环参数
      this.render._setCircles(radius, innerRingRadius, colorType, canvasId, value, hideThumb);
    },
    // 在组件在视图层布局完成后执行
    ready() {
      console.log('MyCircle-ready');
      const { canvasId } = this.data;
      // 初始化Canvas
      this.initCanvas();
      // 延迟再次初始化确保渲染完成
      this.timer = setTimeout(() => {
        this.initCanvas();
        this.render?.checkIsRender(canvasId);
      }, 300);
    },
    // 组件实例被从页面节点树移除时执行
    detached() {
      console.log('MyCircle-detached');
      // 清理定时器
      clearTimeout(this.timer);
      this.timer = null;
    },
  },
  // 组件方法
  methods: {
    // 获取Canvas实例
    getCanvas(canvas) {
      // 如果Canvas为空对象，重新初始化
      if (JSON.stringify(canvas) === '{}') {
        this.initCanvas();
      }
    },
    // 初始化Canvas
    //colors 存在于 this.data 中，但它来源于 properties 而不是 data。
    //当组件初始化时，properties 中的属性会自动合并到 this.data 中
    //所以在解构时 const { colors } = this.data 能够获取到 colors 值
    initCanvas() {
      // 解构组件属性
      const {
        canvasId,
        radius,
        innerRingRadius,
        value = 0,
        useEventChannel,
        eventChannelName,
        colors,
        lineCap = 'round',
        touchCircleStrokeStyle = '',
        touchCircleLineWidth = 0,
      } = this.data;

      // 构建渲染选项
      const options = {
        useEventChannel,
        eventChannelName,
        lineCap,
        colors,
        value,
        touchCircleStrokeStyle,
        touchCircleLineWidth,
      };
      // 防止重复渲染
      console.log('initCanvas-执行', value);
      // 执行渲染
      canvasId && this.render.renderAnnulusColor();

    },
    // 处理获取到的环形图像数据
    _getAnnulusImageData(dataRes) {
      const { position, touchType } = dataRes;
      // 记录触摸类型
      this.touchType = touchType;
      // 调用渲染器方法更新角度位置

      if (this.lastValue != position) {
        if (this.lastValue == undefined) {//值未定义，可以更新
          console.log('_getAnnulusImageData-数值不同未定义可以更新', position, this.lastValue);
          this.render?.renderAnnulusColorThumb(position);
          this.lastValue = position;
        } else if ((Math.abs(this.lastValue - position) > 0.5)) {
          console.log('_getAnnulusImageData-数值相差较大需要更新', position, this.lastValue);
          this.render?.renderAnnulusColorThumb(position);
          this.lastValue = position;
        } else {
          console.log('_getAnnulusImageData-数值相差不大不用更新', position, this.lastValue);
        }
      } else {
        console.log('_getAnnulusImageData-数值相同不能更新', position, this.lastValue);
      }
      this.triggerEvent(this.touchType, position);  // 触发事件,事件还是要触发的

    },





  },
});
